<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交通灯</title>
</head>
<style>
    body {
        background: #2c3e50;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
    }

    .box-wrap {
        width: 120px;
        background: #34495e;
        border-radius: 50px;
        padding: 20px;
        box-shadow: 
            0 0 0 10px rgba(0,0,0,0.1),
            inset 0 0 20px rgba(0,0,0,0.3);
    }

    .light {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 10px auto;
        transition: all 0.3s ease;
        position: relative;
        background: rgba(0,0,0,0.3);
        box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
    }

    .light::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 10px;
        width: 30px;
        height: 30px;
        background: rgba(255,255,255,0.3);
        border-radius: 50%;
        filter: blur(2px);
    }

    .light.active.red {
        background: #e74c3c;
        box-shadow: 
            0 0 40px #e74c3c,
            inset 0 0 15px rgba(0,0,0,0.2);
    }

    .light.active.green {
        background: #2ecc71;
        box-shadow: 
            0 0 40px #2ecc71,
            inset 0 0 15px rgba(0,0,0,0.2);
    }

    .light.active.yellow {
        background: #f1c40f;
        box-shadow: 
            0 0 40px #f1c40f,
            inset 0 0 15px rgba(0,0,0,0.2);
    }
</style>
<body>
    <div class="box-wrap">
        <div class="light red"></div>
        <div class="light yellow"></div>
        <div class="light green"></div>
    </div>
</body>
<script>
    
</script>
</html>
